<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UI Recorder</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style type="text/css">
html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}
li{
    list-style:none;
}
#screenContainer{
    position:absolute;
    width: 100%;
    height:100%;
    text-align: center;

}
#screenshot{
    width: auto;
    height: 100%;
    cursor: pointer;
    box-shadow: 5px 5px 10px #888888;
}
#loadingContainer{
    position:absolute;
    width:100%;
    height:100%;
    z-index:99;
    cursor:wait
}
#loadingContainer img{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-200px;
    margin-left:-100px;
}
.line{
    position: absolute;
    background: red;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    z-index: 999;
}
#toolPannel{
    display: none;
    position:fixed;
    padding:10px 20px;
    box-sizing:border-box;
    border:1px solid #ccc;
    line-height:1;
    box-shadow: 5px 5px 10px #888888;
    top:10px;
    left:10px;
}
#toolPannel span{
    display: block;
    margin-bottom: 12px;
}
.uirecorder-button {
    cursor: pointer;
    margin: 5px;
}
.uirecorder-button a {
    text-decoration: none;
    color: #333333;
    font-family: arial, sans-serif;
    font-size: 12px;
    color: #777;
    text-shadow: 1px 1px 0px white;
    background: -webkit-linear-gradient(top, #ffffff 0%, #dfdfdf 100%);
    border-radius: 3px;
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.4);
    padding: 5px 7px;
}
.uirecorder-button a:hover {
    background: -webkit-linear-gradient(top, #ffffff 0%, #eee 100%);
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.4);
}
.uirecorder-button a:active {
    background: -webkit-linear-gradient(top, #dfdfdf 0%, #f1f1f1 100%);
    box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.2) inset, 0px 1px 1px 0 rgba(255, 255, 255, 1);
}
.uirecorder-button a img {
    display: inline-block;
    padding-right: 8px;
    position: relative;
    top: 2px;
    vertical-align: baseline;
    width: auto;
    height: auto;
}

#uirecorder-dialog {
    display: none;
    position: fixed;
    z-index: 2147483647;
    padding: 20px;
    top: 50%;
    left: 50%;
    width: 480px;
    margin-left: -240px;
    margin-top: -160px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background: rgba(241, 241, 241, 1);
    box-shadow: 5px 5px 10px #888888;
}
#uirecorder-dialog h2 {
    padding-bottom: 10px;
    border-bottom: solid 1px #ccc;
    margin-bottom: 10px;
    color: #333;
}
#uirecorder-dialog ul {
    list-style: none;
    padding: 0;
}
#uirecorder-dialog li {
    padding: 5px 0 5px 30px;
    margin: 0;
}
#uirecorder-dialog li label {
    display: inline-block;
    width: 100px;
    color: #666
}
#uirecorder-dialog li input, #uirecorder-dialog li select, #uirecorder-dialog li textarea {
    display: inline-block;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 5px;
}
#uirecorder-dialog li input, #uirecorder-dialog li textarea {
    width: 250px;
}
#dialogMask{
    display: none;
    position:absolute;
    width:100%;
    height:100%;
    z-index:99;
    background: black;
    opacity: 0.1;
}
</style>
</head>
<body>
    <div id="screenContainer">
        <img id="screenshot">
    </div>
    <div id="loadingContainer">
        <img src="img/mloading.gif">
    </div>
    <div id="toolPannel"></div>
    <div id="uirecorder-dialog">
        <h2 id="uirecorder-dialog-title"></h2>
        <div id="uirecorder-dialog-content"></div>
        <div style="padding-bottom:10px;text-align:center;" id="dialogBottom"></div>
    </div>
    <div id="dialogMask"></div>
    <div id="topLine" class="line"></div>
    <div id="bottomLine" class="line"></div>
    <div id="leftLine" class="line"></div>
    <div id="rightLine" class="line"></div>
    <script type="text/javascript" src="js/mobile.js"></script>
</body>
</html>
